<template>
  <div class="upload-container">
    <a-card title="收料通知单批量导入" :bordered="false" class="upload-card">
      <div class="upload-wrapper">
        <JUpload v-model:value="uploadModalValue" class="upload-area" :showUploadList="true" :maxCount="1" />
        <a-button type="primary" size="large" class="match-btn" @click="onchange" :loading="loading"
        :disabled="loading || (hasProcessed && uploadModalValue)">
          <template #icon>
            <DownloadOutlined />
          </template>
          {{ loading ? '导入中...' : (hasProcessed && uploadModalValue)?'点击文件下载导入结果':'开始导入' }}
        </a-button>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { defHttp } from '/@/utils/http/axios';
import { ref,watch } from 'vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { JUpload } from '/@/components/Form/src/jeecg/components/JUpload';
import { Card as ACard } from 'ant-design-vue';
import { downloadFile } from '/@/utils/common/renderUtils';
const uploadModalValue = ref('');
const loading = ref(false);
const hasProcessed = ref(false);
// 监听文件变化
watch(uploadModalValue, (newVal) => {
  if (!newVal) {
    hasProcessed.value = false; // 文件被删除时重置处理状态
  }
});
const onchange = () => {
  if (!uploadModalValue.value) {
    alert('请先上传文件');
    return;
  }
  
  let params = { params: uploadModalValue.value };
  loading.value = true;
  
  defHttp.get({ url: '/KingDee/processAndDownload', params }).then((res) => {
    console.log(res);
    hasProcessed.value = true; // 标记为已处理
  }).finally(() => {
    loading.value = false;
  });
};
</script>

<style scoped>
/* 原有样式保持不变 */
.upload-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.upload-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upload-area {
  border: 2px dashed #d9d9d9;
  border-radius: 4px;
  padding: 20px;
  transition: border-color 0.3s;
}

.upload-area:hover {
  border-color: #1890ff;
}

.match-btn {
  width: 100%;
  height: 40px;
  font-weight: 500;
}
</style>
